<template>
  <div class="session-view">
    <!-- 页面标题 -->
    <div class="app-header">
      <div class="header-title">会话</div>
    </div>

    <!-- 功能模块 -->
    <div class="module-list">
      <!-- 随机聊天模块 -->
      <div class="module-card random-chat" @click="startRandomChat">
        <div class="module-icon">
          <div class="icon-background random-icon">
            <i class="fas fa-random"></i>
          </div>
        </div>
        <div class="module-content">
          <div class="module-header">
            <h3>随机聊天</h3>
            <div class="module-time">06-21 10:10</div>
          </div>
          <p class="module-description">点击开始随机匹配</p>
        </div>
      </div>

      <!-- 漂流信箱模块 -->
      <div class="module-card floating-mailbox">
        <div class="module-icon">
          <div class="icon-background mailbox-icon">
            <i class="fas fa-dove"></i>
          </div>
        </div>
        <div class="module-content">
          <h3>漂流信箱</h3>
          <p class="module-description">投递一封未知收件人的信件吧</p>
        </div>
      </div>

      <!-- 任务中心模块 -->
      <div class="module-card mission-center">
        <div class="module-icon">
          <div class="icon-background mission-icon">
            <i class="fas fa-tasks"></i>
          </div>
        </div>
        <div class="module-content">
          <h3>任务中心</h3>
          <p class="module-description">每日必做海量金币和银币任务</p>
        </div>
      </div>

      <!-- 互动社区模块 -->
      <div class="module-card community">
        <div class="module-icon">
          <div class="icon-background community-icon">
            <i class="fas fa-comments"></i>
          </div>
        </div>
        <div class="module-content">
          <h3>互动社区</h3>
          <p class="module-description">每日最新的实时社区主题榜单</p>
        </div>
      </div>

      <!-- 今日热点模块 -->
      <div class="hot-topics">
        <div class="section-header">
          <h3>今日热点</h3>
        </div>
        <div class="topic-list">
          <div class="topic-item">
            <div class="topic-icon">
              <i class="fas fa-fire"></i>
            </div>
            <div class="topic-content">
              <div class="topic-title">最新话题：#城市漫步计划</div>
              <div class="topic-info">参与人数：15.8万</div>
            </div>
          </div>
          <div class="topic-item">
            <div class="topic-icon">
              <i class="fas fa-fire"></i>
            </div>
            <div class="topic-content">
              <div class="topic-title">热门话题：#宠物趣事分享</div>
              <div class="topic-info">参与人数：12.3万</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

// 开始随机聊天
const startRandomChat = () => {
  // 在实际应用中，这里可能是API调用开启匹配
  console.log("开始随机匹配...");

  // 模拟匹配延迟
  setTimeout(() => {
    // 跳转到匹配页面
    router.push("/session/matching");
  }, 500);
};
</script>

<style scoped>
.session-view {
  background-color: #f7f9fc;
  min-height: 100vh;
  padding: 0 16px 80px;
}

.app-header {
  position: sticky;
  top: 0;
  background-color: #fff;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.module-list {
  margin-top: 16px;
}

.module-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.module-icon {
  margin-right: 16px;
}

.icon-background {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-background i {
  font-size: 24px;
  color: white;
}

.random-icon {
  background: linear-gradient(135deg, #3494e6, #3bb3e6);
}

.mailbox-icon {
  background: linear-gradient(135deg, #43cea2, #185a9d);
}

.mission-icon {
  background: linear-gradient(135deg, #ff9966, #ff5e62);
}

.community-icon {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
}

.module-content {
  flex: 1;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.module-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.module-time {
  font-size: 12px;
  color: #999;
}

.module-description {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.random-chat {
  border-left: 4px solid #3498db;
}

.random-chat .module-description {
  color: #3498db;
}

.floating-mailbox {
  border-left: 4px solid #2ecc71;
}

.mission-center {
  border-left: 4px solid #f39c12;
}

.community {
  border-left: 4px solid #e74c3c;
}

.hot-topics {
  background-color: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-top: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.section-header {
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}

.section-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #f9fafc;
  border-radius: 12px;
  transition: background-color 0.3s;
}

.topic-item:hover {
  background-color: #f1f5fd;
}

.topic-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.topic-icon i {
  color: #e74c3c;
  font-size: 16px;
}

.topic-content {
  flex: 1;
}

.topic-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.topic-info {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* 响应式布局 */
@media (max-width: 480px) {
  .app-header {
    padding: 12px;
  }

  .module-card {
    padding: 12px;
  }

  .icon-background {
    width: 48px;
    height: 48px;
  }

  .icon-background i {
    font-size: 20px;
  }

  .module-header h3 {
    font-size: 15px;
  }

  .module-description {
    font-size: 13px;
  }
}
</style>
